<template>
	<view>
		<!-- 上方设置，头像，签到 -->
		<view class="head">
			<!-- 设置，编辑两个按钮 -->
			<view class="head-icons">
				<image src="../../static/mine_imgs/setting.png" @click="setting"></image>
				<image src="../../static/mine_imgs/edit.png" @click="edit"></image>
			</view>
			<!-- 头像 -->
			<view class="avatar">
				<image :src="person.userImg"></image>
			</view>
			<!-- 简介 -->
			<view class="user-name">{{person.name}}</view>
			<view class="user-detail">{{person.introduce}}</view>
			<!-- 签到按钮 -->
			<view :class="state?'sign2':'sign'" @click="sign">{{state?"已签到":"签到"}}</view>
		</view>
		<!-- 中间订单分类 -->
		<view style="display: flex;background-color: #dfe8ff9e;">
			<view v-for="item in order_state" :key="item.id" class="order" :data-id="item.id" @click="jumpOrder">
				<!-- 图标 -->
				<image :src="item.src"></image>
				<!-- 文字 -->
				<view>{{item.name}}</view>
			</view>
		</view>
		<!-- 下方其他选项（积分，优惠券，地点等） -->
		<view class="others">
			<view v-for="item in otherList" :key="item.id" class="others-body" :data-id="item.id" @click="jumpOthers">
				<!-- 图标 -->
				<image :src="item.src"></image>
				<!-- 文字 -->
				<view>{{item.name}}</view>
			</view>
		</view>
		<!-- 底部投诉电话 -->
		<view class="foot">投诉热线：021-123456</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false,
				person: {
					name: "深海的游荡者",
					userImg: 'https://c-ssl.duitang.com/uploads/item/202106/17/20210617204503_qgrxd.jpg',
					introduce: "真正的朋友就像宝石，珍贵又稀少。虚伪的朋友就像树叶，哪里都找得到。",
				},
				order_state: [{
						id: 1,
						name: "代付款",
						src: "../../static/mine_imgs/订单-待付款.png"
					},
					{
						id: 2,
						name: "代发货",
						src: "../../static/mine_imgs/首页-待发货.png"
					},
					{
						id: 3,
						name: "待收货",
						src: "../../static/mine_imgs/待收货.png"
					},
					{
						id: 4,
						name: "待评价",
						src: "../../static/mine_imgs/信息.png"
					},
					{
						id: 5,
						name: "售后",
						src: "../../static/mine_imgs/售后.png"
					}
				],
				otherList: [{
						id: 1,
						name: "我的积分",
						src: "../../static/mine_imgs/积分.png"
					},
					{
						id: 2,
						name: "我的优惠券",
						src: "../../static/mine_imgs/优惠券.png"
					},
					{
						id: 3,
						name: "我的地址",
						src: "../../static/mine_imgs/地址.png"
					},
					{
						id: 4,
						name: "我的评论",
						src: "../../static/mine_imgs/评论.png"
					},
					{
						id: 5,
						name: "我的收藏",
						src: "../../static/mine_imgs/喜欢.png"
					},
					{
						id: 6,
						name: "系统消息",
						src: "../../static/mine_imgs/系统消息.png"
					},
				]
			}
		},
		methods: {
			setting(){
				wx.navigateTo({
					url:"../../other_pages/setting/setting"
				})
			},
			edit(){
				wx.navigateTo({
					url:"../../other_pages/geren_detail/geren_detail"
				})
			},
			sign(){
				if(!this.state){
					this.state=!this.state
				}
			},
			jumpOrder(e){
				let id=e.currentTarget.dataset.id
				if(id==1){
					wx.navigateTo({
						url:"../../other_pages/dingdan_detail/dingdan_detail"
					})
				}else if(id==2){
					wx.navigateTo({
						url:"../../other_pages/dingdan_detail/dingdan_detail"
					})
				}
				else if(id==3){
					wx.navigateTo({
						url:"../../other_pages/dingdan_detail/dingdan_detail"
					})
				}else if(id==4){
					wx.navigateTo({
						url:"../../other_pages/dingdan_detail/dingdan_detail"
					})
				}else if(id==5){
					wx.navigateTo({
						url:"../../other_pages/shouhou_dingdan/shouhou_dingdan"
					})
				}
			},
			jumpOthers(e){
				let id=e.currentTarget.dataset.id
				if(id==1){
					wx.navigateTo({
						url:"../../other_pages/jifen/jifen"
					})
				}else if(id==2){
					wx.navigateTo({
						url:"../../other_pages/used_coupon/used_coupon"
					})
				}
				else if(id==3){
					wx.navigateTo({
						url:"../../other_pages/address/address"
					})
				}else if(id==4){
					wx.navigateTo({
						url:"../../other_pages/pinglun/pinglun"
					})
				}else if(id==5){
					wx.navigateTo({
						url:"../../other_pages/shoucang/shoucang"
					})
				}else if(id==6){
					wx.navigateTo({
						url:"../../other_pages/xitong_message/xitong_message"
					})
				}
			}
		},
		onLoad() {
			this.person.name = wx.getStorageSync('userInfo').name
			this.person.userImg = wx.getStorageSync('userInfo').userImg
		}
	}
</script>

<style>
	.head {
		padding: 3vw;
		background-color: #dfe8ff9e;
	}

	.head-icons {
		display: flex;
		justify-content: space-between;
	}

	.head-icons image {
		width: 5vw;
		height: 5vw;
	}

	.avatar {
		text-align: center;
	}

	.avatar image {
		width: 20vw;
		height: 20vw;
		border-radius: 90%;
	}

	.user-name {
		margin: 2vw auto;
		width: 70vw;
		text-align: center;
		font-size: 5vw;
	}

	.user-detail {
		margin: 0 auto 3vw;
		width: 70vw;
		text-align: center;
		font-size: 3.5vw;
	}

	.sign {
		font-size: 4vw;
		width: 20vw;
		text-align: center;
		margin: 0 auto;
		padding: 1vw 0;
		border-radius: 5vw;
		color: #ffffff;
		background-color: #a195ec;
	}
	.sign2 {
		font-size: 4vw;
		width: 20vw;
		text-align: center;
		margin: 0 auto;
		padding: 1vw 0;
		border-radius: 5vw;
		color: #ffffff;
		background-color: #fecaca;
	}
	.order{
		padding: 2vw;
		width: 20vw;
		text-align: center;
		font-size: 3vw;
		border: 1px solid #ccdafd9e;
	}
	.order image{
		width: 8vw;
		height: 8vw;
	}
	.others{
		background-color: #dfe8ff9e;
		text-align: center;
		margin: 0 auto;
		margin: 3vw auto;
		display: flex;
		flex-wrap:wrap;
		font-size: 3vw;
	}
	.others-body{
		width: 32.7vw;
		padding: 3vw 0vw;
		border: 1px solid #ccdafd9e;
	}
	.others-body image{
		width: 8vw;
		height: 8vw;
	}
	.foot{
		background-color: #dfe8ff9e;
		margin: 5vw 0;
		padding: 3vw 0;
		text-align: center;
	}
</style>
